_HTML5で組んでみた_

HTML5で組んでみた | CSS-EBLOG http://css-eblog.com/note/html5-test.html

CSS
JavaScript
Tools

問い合わせ

HTML5で組んでみた
カテゴリ：雑談 2009年6月18日 13:55

タイトル通り、HTML5 の勉強、ってことでこのブログのトップを HTML5 で

1/9 2010/07/04 10:47


テスト的に組んでみた。

組んだ感想。すげーやりやすい。

section など、div よりもより意味のあるタグが追加されたことで、視覚
的にも分かりやすいし、section section {}のように入れ子を表現しても
div のように変になりづらいというのも利点。

HTML5 で組んでみたのサンプル
http://css-eblog.com/eblog_sample/0906/html5_test/

そして全然関係ないけど、今回の HTML5 で組むことで、なんだかかなり色
々なことに気づけたｗ（コーディングのノウハウ的なので）

IE で HTML5 を使う際の注意点
IE は正式に HTML5 には対応していないので、そのまま使用すると、CSS
が反映されない。（section { display: block; }などとしても無視され
る）

なので IE 向けに HTML5 を使うにはちょっとした工夫が必要です。といっ
ても大したことしないけどｗ
以下のように JavaScript を使用して、該当の（section などの）要素を
生成することで CSS が反映されるよーになります。

view plain print ?

01. <script type="text/javascript">
02. document.createElement( 'header' );
03. document.createElement( 'section' );
04. document.createElement( 'nav' );
05. document.createElement( 'aside' );
06. document.createElement( 'footer' );
07. document.createElement( 'article' );
08. </script>

今回使ってみた新要素
header
footer
section
nav

上記以外で使えそうなのとしては

article

2/9 2010/07/04 10:47


dialog
audio
video
canvas

なんかがメインで使うものかなーなんて思ってます。
ただどれも、現在はまだ草案の段階なので仕様や実装が変わる恐れもある
ので注意です。
HTML5 についてはこちらのサイトが詳しいです。

HTML4(と XHTML) との違い

まず大きな違いは DOCTYPE 宣言。HTML5 では<!DOCTYPE html>と書きま
す。システム識別子、公開識別子が取り払われてとてもシンプルになって
ますｗ

次に、今までは文字コードの設定は<meta http-equiv="content-type"
content="text/html; charset="utf-8">を使っていましたが、HTML5 から
は<meta charset="utf-8">となります。

余談
ちなみに上記のサンプルページ、IE6 で見るとちょっと面白いことに・・
ｗ

この記事のカテゴリー一覧を見る⇒雑談

3/9 2010/07/04 10:47


ソースが設計書に早変わり
コボルのコピー句を設計書に一発変換 PL/1インクルードも変
換できます
www.ntl-jp.com

一番簡単な、ホームページ
難しくて混乱していませんか？作成ソフトを今すぐダウン
ロード
hokuken.biz/

ウェブ標準のコーディング
ウェブ標準に準拠した高品質なコーディングを1ページ5,250
円で。
xhtmlcoding.biz

パーマリンク
コメント(0)
トラックバック(0)

<<親要素の幅を越えてボックスの幅をブラウザいっぱいに広げるテク
ニック
|
CSS Nite in Ginza, Vol.36に行ってきました>>

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/146

コメントを投稿

名前:

メールアドレス:（非公開）

URL:

コメント:

4/9 2010/07/04 10:47


承認されるまでコメントは表示されません。しばらくお待まちください。

カテゴリー

CSS-EBLOGトップへ
CSS3関連(10)
CSSだけでアクションを作る(14)
CSSテクニック(80)
CSSハック(9)
CSS小技(12)
IEのCSSの問題を回避する技(10)
Javascript小技(21)
Javascript関連(5)
MovableType関連(1)
SEO関連(2)
webの便利なものを紹介(5)
web関連記事(12)
まとめ記事(6)
ツール(2)
テンプレート(1)
デザイン(3)
バグ関連(5)
備忘録(9)
初心者向け(12)
勉強会(2)
執筆(4)
雑談(16)

5/9 2010/07/04 10:47


Ads by Google
CSS
HTML CSS XHTML
CSS Browser Test
CSS JavaScript Menu

最近のエントリー

CSS Nite LP9にて、第2回コーディングコンテスト開催決定。
CSSのみで袋文字を実現する - CSS3で遊んでみる3
RGBaを使ったプログレッシブ・エンハンスメントと注意点
CSSのみでグローバルメニューのhover以外をぼかしてhover中ボタン
を強調する
web creators vol.98で1記事執筆しました
ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効
果
Photoshopライクな操作で手軽に作れるCSS3ジェネレーター
ボタンに光のエフェクトを加えるCSS3 - CSS3で遊んでみる2

おすすめCSSサイト

CSS-HappyLife ZERO
CSS-HappyLife
CSSフリーライブラリー
WWW WATCH
Redline Magazine
ヨモツネット

あわせて読みたい

プロフィール

プロフィール

6/9 2010/07/04 10:47


えど

CSSが大好きで、それに関する記事をメインに書いてます。
おかげさまで、最近「web creators」で記事を執筆させていただいてま
す。

Google Waveに招待していただきました。
まだ登録してる人が少ないので、よかったら
使ってる人、連絡くださいｗ
edo.m18@googlewave.com

Twitter始めました。
http://twitter.com/edo_m18

CSS-EBLOGの情報を発信するTwitterアカウントも取りました。
こちらもぜひ。
http://twitter.com/css_eblog

▼ポートフォリオを公開しています。
http://portfolio.css-eblog.com/

詳細はこちら

Powered by iddy

7/9 2010/07/04 10:47


Google Conversation

テスト的に設置してます。好きにコメントしてみてくださいｗ

8/9 2010/07/04 10:47

_HTML5で組んでみた_

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to _HTML5で組んでみた_

Similar to _HTML5で組んでみた_ (20)

More from Kelly Holonic

More from Kelly Holonic (6)

_HTML5で組んでみた_